html {
  scroll-behavior: smooth;
}

body {
  background-color: #e3e3e3;
}

.introduce {
  display: flex;
  justify-content: space-around;
  padding: 5.20833333vw 0 1.04166667vw;
  width: 100%;
}

.introduce .info {
  padding: 4.16666667vw 0 2.86458333vw 1.04166667vw;
  width: 55.20833333vw;
  color: black;
}

.introduce .info p {
  margin: 0.41666667vw 0 0;
  font-size: 1.14583333vw;
  color: #3f3f3f;
}

.introduce .logo {
  padding-right: 1.04166667vw;
  width: 23.4375vw;
  height: auto;
  max-width: 100%;
}

.goods {
  margin-bottom: 1.5625vw;
  width: 100%;
  height: 110%;
  background-image: url(../images/background.png);
}

.goods .title {
  padding: 2.08333333vw 0 2.5vw 0.625vw;
  line-height: 2.86458333vw;
}

.goods .title h1 {
  color: black;
}

.goods .title p {
  font-size: 1.14583333vw;
  color: #3f3f3f;
}

.goods .content {
  display: flex;
}

.goods .content .left {
  margin-left: 0.57291667vw;
  width: 39.0625vw;
  height: auto;
  background-color: #e3e3e3;
  box-shadow: 0.05208333vw 0.10416667vw 0.52083333vw 0.10416667vw rgba(0, 0, 0, 0.2);
}

.goods .content .left h1 {
  color: black;
  text-indent: 1vw;
}

.goods .content .left p {
  font-size: 1.14583333vw;
  color: #3f3f3f;
  text-indent: 1vw;
}

.goods .content .left span {
  font-size: 1.71875vw;
  font-weight: 800;
  color: black;
}

.goods .content .left span img {
  padding: 0.52083333vw 0.41666667vw;
  width: 4.6875vw;
  max-width: 100%;
}

.goods .content .left .pic {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 39.0625vw;
  transition: all 5s;
}

.goods .content .left .pic :hover {
  transform: scale(102%);
}

.goods .content .left .pic img {
  position: absolute;
  width: 100%;
  min-width: auto;
  height: 100%;
}

.goods .content .left .pic .box {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.88541667vw 0;
  width: 5.20833333vw;
  background-color: #00b8e4;
}

.goods .content .left .pic .box p {
  font-size: 1.5625vw;
  color: #fff;
  font-weight: 800;
  text-indent: 0.98vw;
}

.goods .content .right {
  width: 57.29166667vw;
}

.goods .content .right ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.goods .content .right ul li {
  width: 18.22916667vw;
  max-width: 100%;
  background-color: #e3e3e3;
  box-shadow: 0.05208333vw 0.10416667vw 0.52083333vw 0.10416667vw rgba(0, 0, 0, 0.2);
}

.goods .content .right ul li h1 {
  color: black;
  text-indent: 1vw;
}

.goods .content .right ul li p {
  font-size: 1.14583333vw;
  color: #3f3f3f;
  text-indent: 1vw;
}

.goods .content .right ul li span {
  font-size: 1.71875vw;
  font-weight: 800;
  color: black;
}

.goods .content .right ul li span img {
  padding: 0.52083333vw 0.26041667vw;
  width: 3.64583333vw;
  max-width: 100%;
}

.goods .content .right ul li .pic {
  position: relative;
  background-color: #fff;
  transition: all 5s;
}

.goods .content .right ul li .pic :hover {
  transform: scale(102%);
}

.goods .content .right ul li .pic img {
  width: 100%;
}

.goods .content .right ul li .pic .box {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.88541667vw 0;
  width: 5.20833333vw;
  background-color: #00b8e4;
}

.goods .content .right ul li .pic .box p {
  font-size: 1.5625vw;
  color: #fff;
  font-weight: 800;
  text-indent: 0.98vw;
}

.purchase {
  margin-left: 1.04166667vw;
  margin-bottom: 1.5625vw;
}

.purchase .box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 96.71875vw;
  background-color: #fff;
}

.purchase .box .head img {
  width: 15.625vw;
  height: 14.58333333vw;
}

.purchase .box .buy {
  margin-left: -7.8125vw;
  line-height: 2.08333333vw;
  color: black;
}

.purchase .box .buy h2 {
  font-size: 1.5625vw;
  font-weight: 400;
}

.purchase .box .buy p {
  font-size: 1.14583333vw;
  color: #3f3f3f;
}

.purchase .box .buy .button:hover :hover {
  background-color: #00b8e4;
  color: #fff;
}

.purchase .box .buy a {
  padding: 0.26041667vw 5.20833333vw;
  background-color: #fff;
  font-weight: 800;
  color: #00b8e4;
  border: 0.05208333vw solid #00b8e4;
}

.purchase .box .foot img {
  width: 26.04166667vw;
  height: 13.02083333vw;
}

.way {
  margin-bottom: 0.26041667vw;
  padding: 2.08333333vw 0 2.5vw 0.625vw;
  line-height: 2.86458333vw;
}

.way h1 {
  color: black;
}

.way p {
  font-size: 1.14583333vw;
  color: #3f3f3f;
}

.other {
  margin-left: 12.5vw;
  margin-bottom: 0.52083333vw;
  width: 72.91666667vw;
  background: url(../images/background.png) no-repeat;
  background-size: cover;
}

.other .banner img {
  width: 10%;
}

.other a {
  display: flex;
  justify-content: space-between;
}

.other a img {
  width: 100%;
}

.footer2 {
  width: 100%;
  background: url(../uplods/foot.jpg) no-repeat;
  background-size: cover;
}

.footer2 h1 {
  padding: 2.60416667vw 0 1.04166667vw;
  text-align: center;
  color: #fff;
}

.footer2 ul {
  margin: 0 auto;
  display: flex;
  width: 13.54166667vw;
  height: 7.8125vw;
}

.footer2 ul li .box {
  margin: 0 0.52083333vw;
  width: 5.20833333vw;
  height: 5.20833333vw;
  border-radius: 50%;
  border: 0.05208333vw solid white;
}

.footer2 ul li .box a img {
  width: 100%;
  height: 100%;
}

.fix {
  position: fixed;
  right: 1.5%;
  bottom: 3%;
  background-color: #b9b9b9;
  border-radius: 0.26041667vw;
}

.fix a {
  cursor: pointer;
}